<template>
  <div class="undolist">
    <h2 class="undolist-header">
      正在进行
      <span class="count" data-test='count'>
        {{list.length}}
      </span>
    </h2>
    <ul>
        <li
            v-for='(item,index) in list' :key='index'
            data-test='item'
            class="item"
        >
          <input class='item-checkbox' type="checkbox">
          {{item.value}}
          <span class="delete-button" @click='handleDelete(index)' data-test='delete-button'>-</span>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'UndoList',
  props: {
    list: Array
  },
  methods: {
    handleDelete (index) {
      this.$emit('delete', index)
    }
  }
}
</script>

<style scoped lang="stylus">
    .undolist
      width 800px
      margin 0 auto
    .undolist-header
      margin-top 10px
    .count
      float right
      margin-top 5px
      font-size 12px
      height 20px
      line-height 20px
      text-align center
      width 20px
      border-radius 10px
      background-color skyblue
      color white
    .item
      margin-top 10px
      list-style none
      line-height 32px
      font-size 14px
      border-radius 4px
      border 1px solid lightblue
      border-left 4px solid gray
      background-color white
    .item-checkbox
      margin 0 5px 0 10px
      height 14px
      width 14px
    .delete-button
      float right
      border 1px solid lightgreen
      margin-top 7px
      margin-right 10px
      height 16px
      width 16px
      line-height 16px
      text-align center
      border-radius 10px
      cursor pointer
</style>
